<template>
    <section>
        <div class="square-box">
            <p>行政服务中心<br>今日服务动态</p>
            <div class="box">
                <div class="wxqh"></div>
                <p class="font1">
                    <ICountUp style="font-size: 32px;"
                              :endVal="parseInt(indexData.countHallOffernumToday)"
                              :key="Math.random()"
                              @ready="onReady"
                    /><span>次</span></p>
                <p class="fff">线下取号</p>
            </div>
            <div class="box">
                <div class="bjl"></div>
                <p class="font1">
                    <ICountUp style="font-size: 32px;"
                              :endVal="parseInt(indexData.countHallReceptionToday)"
                              :key="Math.random()"
                              @ready="onReady"
                    /><span>次</span></p>
                <p class="fff">办件量</p>
            </div>
            <div class="box">
                <div class="sj"></div>
                <p class="font1">
                    <ICountUp style="font-size: 32px;"
                              :endVal="parseInt(indexData.countHallHandleTime)"
                              :key="Math.random()"
                              @ready="onReady"
                    /><span>分钟</span></p>
                <p class="fff">平均办结时间</p>
            </div>
            <div class="box">
                <div class="my"></div>
                <p class="font1">
                    <ICountUp style="font-size: 32px;"
                              :endVal="parseInt(indexData.countHallSatisRate)"
                              :key="Math.random()"
                              @ready="onReady"
                    />%</p>
                <p class="fff">满意度</p>
            </div>
        </div>
    </section>
</template>

<script>

    import ICountUp from 'vue-countup-v2'

    export default {
        name: 'square-box',
        components: {
            ICountUp,
        },
        props:['indexData'],
        data () {
            return {

            }
        },
        mounted(){

        },
        methods: {
            onReady(instance, CountUp) {
             //   instance.update();
            },
        },
        watch:{
        }
    }

</script>
<style lang="less">
    .square-box{
        width: 220px;
        p{
            font-size: 36px;
            color: #2dfcff;
            text-align: center;
        }
        .box{
            width: 180px;
            height: 160px;
            background-color:rgba(45,252,255,0.1);
            border-radius: 20px;
            margin: 24px auto 0 auto;
            overflow: hidden;
            p{
                text-align: center;
                font-size: 32px;
                span{
                    font-size: 32px;
                    font-weight:bold;
                }
            }
            .font1{
                color: #fac702;
            }
            .fff{
                color: #ffffff;
            }
        }
    }
    .bjl{
        width: 39px;
        height: 41px;
        background-image: url('./img/bjl.png');
        margin: 16px auto 6px auto;
    }
    .my{
        width: 47px;
        height: 41px;
        background-image: url('./img/my.png');
        margin: 16px auto 4px auto;
    }
    .sj{
        width: 44px;
        height: 44px;
        background-image: url('./img/sj.png');
        margin: 16px auto 4px auto;
    }
    .wxqh{
        width: 44px;
        height: 41px;
        background-image: url('./img/wxqh.png');
        margin: 16px auto 4px auto;
    }
</style>
